<template>
  <page-wrap stay-still back :title="title" hide-tab>
    <view
      class="live"
      :style="
        'height: calc(100vh - ' +
        navHeight +
        'px - env(safe-area-inset-bottom));'
      "
    >
      <view class="live-banner" v-if="bannerList && bannerList.length">
        <u-swiper
          :list="bannerList"
          :height="(8 / 15) * 750"
          :border-radius="0"
          :interval="4000"
          autoplay
          indicator-dots
          circular
          @click="handleBannerLive"
        ></u-swiper>
      </view>
      <template v-if="needTrade">
        <u-tabs-swiper
          class="live-trade"
          ref="uTabs"
          :list="tabList"
          :current="current"
          :is-scroll="false"
          :active-color="activeColor"
          :inactive-color="inactiveColor"
          @change="handleTab"
        ></u-tabs-swiper>
        <swiper
          class="swiper-box"
          :duration="200"
          :current="swiperCurrent"
          @transition="handleTransition"
          @animationfinish="handleAnimation"
        >
          <swiper-item
            class="swiper-item"
            v-for="(item, index) in tabList"
            :key="index"
          >
            <scroll-view
              scroll-y
              @scrolltolower="handleMore(item)"
              class="scroll-views"
            >
              <view class="live-list" v-if="item.data.length">
                <view
                  class="live-item"
                  v-for="e in item.data"
                  :key="e.live_id"
                  @click="handleToLive(e)"
                >
                  <view class="item-logo">
                    <u-image
                      width="264rpx"
                      height="154rpx"
                      :src="e.background"
                      border-radius="12rpx"
                    ></u-image>
                    <text :class="['logo-status', 'status' + e.status]"></text>
                  </view>
                  <view class="item-info">
                    <view class="info-title">{{ e.article_name }}</view>
                    <view class="info-tutor">讲师：{{ e.tutor_name }}</view>
                    <view class="info-time">
                      <u-icon name="clock"></u-icon>{{ e.live_time }}
                    </view>
                    <view class="info-viewer">
                      <u-icon name="account"></u-icon>{{ e.viewer }}人参与
                    </view>
                  </view>
                </view>
                <u-loadmore :status="item.moreLoading" :load-text="loadText" />
              </view>
              <u-empty text="暂无数据" v-else></u-empty>
            </scroll-view>
          </swiper-item>
        </swiper>
      </template>
      <scroll-view
        scroll-y
        @scrolltolower="handleMore('')"
        class="scroll-views"
        v-else
      >
        <view class="live-list" v-if="liveList.length">
          <view
            class="live-item"
            v-for="item in liveList"
            :key="item.live_id"
            @click="handleToLive(item)"
          >
            <view class="item-logo">
              <u-image
                width="264rpx"
                height="154rpx"
                :src="item.background"
                border-radius="12rpx"
              ></u-image>
              <text :class="['logo-status', 'status' + item.status]"></text>
            </view>
            <view class="item-info">
              <view class="info-title">{{ item.article_name }}</view>
              <view class="info-tutor">讲师：{{ item.tutor_name }}</view>
              <view class="info-time">
                <u-icon name="clock"></u-icon>{{ item.live_time }}
              </view>
              <view class="info-viewer">
                <u-icon name="account"></u-icon>{{ item.viewer }}人参与
              </view>
            </view>
          </view>
          <u-loadmore :status="moreLoading" :load-text="loadText" />
        </view>
        <u-empty text="暂无数据" v-else></u-empty>
      </scroll-view>
    </view>
  </page-wrap>
</template>

<script>
import { getBannerLive, getLiveTrade, getLiveListByTrade } from "@/api/index";
import ShareMixin from '@/mixins/share';
export default {
  mixins: [ShareMixin],
  data() {
    return {
      title: "",
      navHeight: 0,
      activeColor: this.$primaryColor,
      inactiveColor: "#555555",
      bannerList: [],
      liveList: [],
      tabList: [],
      pageParam: {
        page: 0,
        pageSize: 20,
      },
      current: 0,
      swiperCurrent: 0,
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "没有更多了",
      },
      moreLoading: "loadmore",
      needTrade: this.$needTrade,
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      shareTitle: this.$selfName + " - 直播招聘",
      sharePath: '/pagesSub/index/live/index',
    };
  },
  // onShareAppMessage() {
  //   return {
  //     title: this.$selfName + " - 直播招聘",
  //     path: "/pagesSub/index/live/index",
  //   };
  // },
  // onShareTimeline() {
  //   return {
  //     title: this.$selfName + " - 直播招聘",
  //     path: "/pagesSub/index/live/index",
  //   };
  // },
  onShow() {
    let title = "";
    let kingKong = this.$indexKingKong(this.$imgBaseSelf);
    if (JSON.stringify(kingKong).indexOf("live") < 0) {
      title = "普工职位";
      this.title = title;
      uni.setNavigationBarTitle({
        title: title,
      });
    } else {
      title = "直播招聘";
      this.title = title;
      this.getBannerLive();
      this.getLiveTrade();
    }
    // #ifdef MP-WEIXIN
    this.navHeight = getApp().globalData.navHeight;
    // #endif
  },
  methods: {
    handleMore(item) {
      if (item) {
        this.$set(item.pageParam, "page", item.pageParam.page + 1);
      } else {
        this.$set(this.pageParam, "page", this.pageParam.page + 1);
      }
      this.getLiveList();
    },
    handleTab(index) {
      this.swiperCurrent = index;
      this.getLiveList();
    },
    handleTransition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    handleAnimation(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    getBannerLive() {
      let param = {
        source: this.$liveType,
      };
      getBannerLive(param).then((res) => {
        if (+res.code === 200) {
          this.bannerList = JSON.parse(
            JSON.stringify(res.data).replace(/background/g, "image")
          );
        }
      });
    },
    getLiveTrade() {
      if (this.needTrade) {
        getLiveTrade().then((res) => {
          if (+res.code === 200) {
            this.tabList = res.data.map((ele) => ({
              name: ele.trade_name,
              id: ele.trade_id,
              data: [],
              moreLoading: "loadmore",
              pageParam: {
                page: 0,
                pageSize: 20,
              },
            }));
            this.getLiveList();
          }
        });
      } else {
        this.getLiveList();
      }
    },
    getLiveList() {
      let param = {
        tradeid: "0",
        person_id: "0",
        condition_arr: JSON.stringify({
          source: this.$liveType,
          page: this.pageParam.page,
          pageSize: this.pageParam.pageSize,
        }),
      };
      if (this.needTrade) {
        let item = this.tabList[this.swiperCurrent];
        if (item.moreLoading == "loading" || item.moreLoading == "nomore")
          return;
        this.$set(item, "moreLoading", "loading");
        param.tradeid = item.id;
      } else {
        if (this.moreLoading == "loading" || this.moreLoading == "nomore")
          return;
        this.moreLoading = "loading";
      }
      getLiveListByTrade(param).then((res) => {
        if (+res.code === 200) {
          if (this.needTrade) {
            let item = this.tabList[this.swiperCurrent];
            console.log(item);
            this.$set(item, "data", [...item.data, ...(res.data || [])]);
            if (res.data && res.data.length) {
              this.$set(item, "moreLoading", "loadmore");
              if (item.pageParam.page >= res.pageparam.pages) {
                this.$set(item, "moreLoading", "nomore");
              }
            } else {
              this.$set(item, "moreLoading", "nomore");
            }
          } else {
            this.liveList.push(...(res.data || []));
            if (res.data && res.data.length) {
              this.moreLoading = "loadmore";
              if (this.pageParam.page >= res.pageparam.pages) {
                this.moreLoading = "nomore";
              }
            } else {
              this.moreLoading = "nomore";
            }
          }
        }
      });
    },
    handleBannerLive(index) {
      let id = this.bannerList[index].live_id;
      let url = `/pagesSub/index/liveDetail/index?id=${id}`;
      uni.navigateTo({
        url: url,
      });
    },
    handleToLive(item) {
      let url = `/pagesSub/index/liveDetail/index?id=${item.live_id}&title=${item.article_name}`;
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style lang="scss">
$img-base-live: $img-base + "live/";
.live {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  .scroll-views {
    flex-grow: 1;
    height: 1rpx;
    .live-list {
      .live-item {
        display: flex;
        align-items: center;
        margin: 24rpx 32rpx;
        padding: 32rpx;
        border-radius: 24rpx;
        background: $uni-bg-color;
        font-size: $uni-font-size-sm;
        line-height: $uni-font-size-base;
        .item-logo {
          flex-shrink: 0;
          position: relative;
          margin-right: 24rpx;
          .logo-status {
            position: absolute;
            left: 0;
            top: 0;
            height: 36rpx;
            background-size: 100% 100%;
            &.status2 {
              width: 96rpx;
              background-image: url($img-base-live + "status1.png");
            }
            &.status1 {
              width: 76rpx;
              background-image: url($img-base-live + "status2.png");
            }
            &.status4 {
              width: 57rpx;
              background-image: url($img-base-live + "status3.png");
            }
          }
        }
        .item-info {
          flex: 1;
          width: 100rpx;
          font-size: $uni-font-size-nor;
          .info-title {
            margin-bottom: 16rpx;
            min-width: 100%;
            line-height: 1.1em;
            font-size: $uni-font-size-base;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .info-tutor {
            margin-bottom: 12rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .info-time {
            margin-bottom: 8rpx;
            color: $uni-text-color-555;
          }
          .info-viewer {
            display: flex;
            align-items: center;
            color: $uni-text-color-555;
            .u-icon {
              margin-top: 2rpx;
            }
          }
          .u-icon {
            margin-right: 8rpx;
            font-size: $uni-font-size-sm;
            color: $uni-text-color-888;
          }
        }
      }
    }
    ::v-deep .u-empty {
      position: absolute;
      left: 50%;
      top: 44%;
      transform: translate(-50%, -50%);
    }
  }
  .u-tabs {
    ::v-deep .u-tabs-item {
      padding: 0 28rpx !important;
    }
  }
  .swiper-box {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    ::v-deep .uni-swiper-wrapper,
    ::v-deep swiper-item {
      flex: 1;
      height: 1rpx;
    }
    .scroll-views {
      height: 100%;
    }
  }
  ::v-deep .u-load-more-wrap {
    padding: 16rpx 0 40rpx;
  }
}
</style>

